<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }
        #d1 {
            width: 408px;
            height: 200px;
            border: 1px solid rgba(0, 0, 0, 0.81);
            margin: 0px auto;
        }
        #d1 ul li {
            list-style: none;
            float: left;
            border: 1px solid rgba(33, 25, 25, 0.76);
            width: 100px;
            height: 30px;
            text-align: center;
            line-height: 30px;
            cursor: pointer; /*鼠标放在图片上现在手的形状*/
        }
        #div1,#div2,#div3,#div4 {
            display: none;
            clear: both;
        }
        #div1 {
            display: block;
        }
    </style>
    <script>
        function fn(n,m) {
            for (var i = 1; i <= 4; i++) {
                //设置div标签的 内容全部隐藏
                var d = document.getElementById("div"+i);
                d.style.display = "none";
                var e = document.getElementById("li"+i);
                e.style.border = "1px solid rgba(33, 25, 25, 0.76)";
            }
            //获取div对象 使div对象显示
            var obj = document.getElementById("div"+n);
            obj.style.display = "block";
            //鼠标放上去后下边框变成白色
            m.style.borderBottom = "white";
        }
    </script>
</head>
<body>
<div id="d1">
   <ul>
       <li id="li1" onmouseover="fn(1,this)">国内新闻</li>
       <li id="li2" onmouseover="fn(2,this)">国际新闻</li>
       <li id="li3" onmouseover="fn(3,this)">体育新闻</li>
       <li id="li4" onmouseover="fn(4,this)">娱乐新闻</li>
   </ul>
   <div id="div1">
        国内新闻
   </div>
    <div id="div2">
        国际新闻
    </div>
    <div id="div3">
        体育新闻
    </div>
    <div id="div4">
        娱乐新闻
    </div>
</div>
</body>
</html>